<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{getLangText(label.visualMap)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<!-- 公用属性 start -->
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.visualMap)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="isVisualMap"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<div class="table-row-item">
					<span>{{getLangText(label.visualMap)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="visualMap.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.type)}}</label>
					<md-select v-model="visualMap.type">
						<md-option value="continuous">{{getLangText(label.continuous)}}</md-option>
						<md-option value="piecewise">{{getLangText(label.piecewise)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.min)}}</label>
					<md-input v-model.number="visualMap.min"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.max)}}</label>
					<md-input v-model.number="visualMap.max"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.inverse)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="visualMap.inverse"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>
				<div v-if="(visualMap.color instanceof Array)">
					<div class="table-row-item">
						<span>{{getLangText(label.color)}}:</span>
						<span>
							<md-button class="md-icon-button" @click="addColorPicker">
								<i class="iconfont iconadd"></i>
							</md-button>
						</span>
					</div>
					<div class="table-row-item" v-for="(item,idx) in visualMap.color">
						<span></span>
						<span>
							<span
								class="color-span"
								:style="{background:visualMap.color[idx]}"
								@click="showVisualMapColor(item,idx)"
							></span>
							{{visualMap.color[idx]}}
							<md-button class="md-icon-button" @click="delColorPicker(idx)">
								<i class="iconfont iconshanchu"></i>
							</md-button>
						</span>
					</div>

					<color-picker
						:lang-type="langType"
						:rgba="picker.result"
						@color-result="onVisualMapColor"
						:show-picker="picker.show&&picker.current=='color'"
					></color-picker>
				</div>

				<div class="table-row-item">
					<span>{{getLangText(label.bgColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:visualMap.backgroundColor}"
							@click="showColorPicker('backgroundColor')"
						></span>
						{{visualMap.backgroundColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="visualMap.backgroundColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='backgroundColor'"
				></color-picker>

				<div class="table-row-item">
					<span>{{getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:visualMap.borderColor}"
							@click="showColorPicker('borderColor')"
						></span>
						{{visualMap.borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="visualMap.borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColor'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.borderWidth)}}</label>
					<md-input v-model="visualMap.borderWidth"></md-input>
				</md-field>

				<div style="display:flex;">
					<md-field style="width:135px;display:inline-flex;">
						<label>{{getLangText(label.text)}}1</label>
						<md-input v-model="visualMap.text[0]"></md-input>
					</md-field>
					<md-field style="width:135px;display:inline-flex;margin-left:8px;">
						<label>{{getLangText(label.text)}}2</label>
						<md-input v-model="visualMap.text[1]"></md-input>
					</md-field>
				</div>
				<md-field>
					<label>{{getLangText(label.textGap)}}</label>
					<md-input v-model="visualMap.textGap"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.padding)}}</label>
					<md-input v-model="visualMap.padding"></md-input>
				</md-field>

				<div style="display:flex;">
					<md-field style="width:135px;display:inline-flex;">
						<label>{{getLangText(label.itemWidth)}}</label>
						<md-input v-model="visualMap.itemWidth"></md-input>
					</md-field>
					<md-field style="width:135px;display:inline-flex;margin-left:8px;">
						<label>{{getLangText(label.itemHeight)}}</label>
						<md-input v-model="visualMap.itemHeight"></md-input>
					</md-field>
				</div>

				<md-field>
					<label>{{getLangText(label.align)}}</label>
					<md-select v-model="visualMap.align">
						<md-option :value="item.en" v-for="item in align" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>{{getLangText(label.orient)}}</label>
					<md-select v-model="visualMap.orient">
						<md-option value="horizontal">{{getLangText(label.horizontal)}}</md-option>
						<md-option value="vertical">{{getLangText(label.vertical)}}</md-option>
					</md-select>
				</md-field>
			</div>
			<!-- 共用属性 end -->
			<div style="padding:0 8px;" v-if="visualMap.type=='continuous'">
				<div class="table-row-item">
					<span>{{getLangText(label.calculable)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="continuous.calculable"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<div style="display:flex;">
					<md-field style="width:135px;display:inline-flex;">
						<label>{{getLangText(label.range)}}{{getLangText(label.min)}}</label>
						<md-input v-model="continuous.range[0]"></md-input>
					</md-field>
					<md-field style="width:135px;display:inline-flex;margin-left:8px;">
						<label>{{getLangText(label.range)}}{{getLangText(label.max)}}</label>
						<md-input v-model="continuous.range[1]"></md-input>
					</md-field>
				</div>
			</div>
			<div style="padding:0 8px;" v-if="visualMap.type=='piecewise'">
				<div class="table-row-item">
					<span>{{getLangText(label.showLabel)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="piecewise.showLabel"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.itemSymbol)}}</label>
					<md-select v-model="piecewise.itemSymbol">
						<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>{{getLangText(label.splitNumber)}}</label>
					<md-input v-model="piecewise.splitNumber"></md-input>
				</md-field>

				<md-table v-model="piecewise.pieces">
					<md-table-row slot="md-table-row" slot-scope="{ index }">
						<md-table-cell :md-label="getLangText(label.min)">
							<input v-model="piecewise.pieces[index].min" class="transparent-input" style="width:80px;" />
						</md-table-cell>
						<md-table-cell :md-label="getLangText(label.max)">
							<input v-model="piecewise.pieces[index].max" class="transparent-input" style="width:80px;" />
						</md-table-cell>
						<md-table-cell :md-label="getLangText(label.categories)">
							<input v-model="piecewise.categories[index]" class="transparent-input" style="width:80px;" />
						</md-table-cell>
					</md-table-row>
				</md-table>
			</div>

			<text-style :lang-type="langType" :option="visualMap.textStyle"></text-style>

			<!-- <div class="table-row-item" style="padding:0 8px;">
				<span>{{getLangText(label.isRange)}}:</span>
				<span>
					{{getLangText(label.no)}}
					<md-switch v-model="isRange"></md-switch>
					{{getLangText(label.yes)}}
				</span>
			</div>-->
			<range-style
				:lang-type="langType"
				:range-name="getLangText(label.inRange)"
				:option="visualMap.inRange"
				v-if="visualMap.inRange"
			></range-style>
			<range-style
				:lang-type="langType"
				:range-name="getLangText(label.outOfRange)"
				:option="visualMap.outOfRange"
				v-if="visualMap.outOfRange"
			></range-style>
			<range-style
				:lang-type="langType"
				:range-name="getLangText(label.targetIn)"
				:option="visualMap.target.inRange"
				v-if="visualMap.target.inRange"
			></range-style>
			<range-style
				:lang-type="langType"
				:range-name="getLangText(label.targetOut)"
				:option="visualMap.target.outOfRange"
				v-if="visualMap.target.outOfRange"
			></range-style>
			<range-style
				:lang-type="langType"
				:range-name="getLangText(label.controllerIn)"
				:option="visualMap.controller.outOfRange"
				v-if="visualMap.controller.outOfRange"
			></range-style>
			<range-style
				:lang-type="langType"
				:range-name="getLangText(label.controllerOut)"
				:option="visualMap.controller.outOfRange"
				v-if="visualMap.controller.outOfRange"
			></range-style>
		</div>
	</div>
</template>
<script>
	import RangeStyle from "@/components/comp/RangeStyle";
	import TextStyle from "@/components/comp/TextStyle";
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "VisualMap",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		components: {
			"range-style": RangeStyle,
			"text-style": TextStyle,
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				visualMap: { zh: "视觉映射", en: "visualMap" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				continuous: { zh: "连续型", en: "continuous" },
				piecewise: { zh: "分段型", en: "piecewise" },
				type: { zh: "类型", en: "type" },
				min: { zh: "最小值", en: "min" },
				max: { zh: "最大值", en: "max" },
				left: { zh: "左侧距离", en: "left" },
				top: { zh: "上侧距离", en: "top" },
				right: { zh: "右侧距离", en: "right" },
				bottom: { zh: "下侧距离", en: "bottom" },
				bgColor: { zh: "背景颜色", en: "bgColor" },
				borderColor: { zh: "边框颜色", en: "borderColor" },
				borderWidth: { zh: "边框线宽", en: "borderWidth" },
				text: { zh: "两端的文本", en: "text" },
				textGap: { zh: "文字间距", en: "textGap" },
				align: { zh: "对齐", en: "align" },
				itemHeight: { zh: "图形高度", en: "itemHeight" },
				itemWidth: { zh: "图形宽度", en: "itemWidth" },
				inverse: { zh: "反转组件", en: "inverse" },
				precision: { zh: "数据精度", en: "precision" },
				padding: { zh: "内边距", en: "padding" },
				color: { zh: "颜色配置", en: "color" },
				orient: { zh: "布局朝向", en: "orient" },
				horizontal: { zh: "横向", en: "horizontal" },
				vertical: { zh: "纵向", en: "vertical" },
				inRange: { zh: "选中范围内", en: "inRange" },
				outOfRange: { zh: "选中范围外", en: "outOfRange" },
				controllerIn: { zh: "控制器范围内", en: "controllerInRange" },
				controllerOut: { zh: "控制器范围外", en: "controllerOutOfRange" },
				targetIn: { zh: "目标范围内", en: "targetInRange" },
				targetOut: { zh: "目标范围外", en: "targetOfRange" },
				itemSymbol: { zh: "图形", en: "itemSymbol" },
				splitNumber: { zh: "数据分段", en: "splitNumber" },
				showLabel: { zh: "数据标签显示", en: "showLabel" },
				pieces: { zh: "范围片段", en: "pieces" },
				categories: { zh: "范围类目", en: "categories" },
				range: { zh: "手柄范围", en: "range" },
				calculable: { zh: "手柄显示", en: "calculable" }
				// isRange: { zh: "开启视觉通道", en: "isRange" }
			},
			align: [
				{ zh: "自动", en: "auto" },
				{ zh: "左对齐", en: "left" },
				{ zh: "右对齐", en: "right" },
				{ zh: "上对齐", en: "top" },
				{ zh: "下对齐", en: "bottom" }
			],
			isVisualMap: false,
			isShow: false,
			// isRange: false,
			visualMap: {
				show: false,
				type: "continuous",
				min: "",
				max: "",
				left: 0,
				right: "auto",
				top: "auto",
				bottom: 0,
				backgroundColor: "rgba(0,0,0,0)",
				borderColor: "#ccc",
				borderWidth: 0,
				color: ["#bf444c", "#d88273", "#f6efa6"],
				orient: "vertical",
				padding: 5,
				textStyle: {},
				inverse: false,
				itemWidth: 20,
				itemHeight: 140,
				precision: 0,
				align: "auto",
				text: ["high", "low"],
				textGap: 10,
				target: {
					inRange: { color: ["#f6efa6", "#d88273", "#bf444c"] },
					outOfRange: { color: ["rgba(0,0,0,0)"], opacity: [0, 0] }
				},
				controller: {
					inRange: {
						color: ["#f6efa6", "#d88273", "#bf444c"],
						symbol: ["roundRect"],
						symbolSize: [20, 20]
					},
					outOfRange: {
						color: ["#aaa"],
						symbol: ["roundRect"],
						symbolSize: [20, 20]
					}
				}
			},

			continuous: {
				calculable: false,
				range: [20, 100]
			},
			piecewise: {
				splitNumber: 3,
				pieces: [{ min: 200 }, { min: 200, max: 100 }, { max: 100 }],
				categories: ["超额", "正常", "过少"],
				showLabel: true,
				itemSymbol: "roundRect"
			},
			picker: {
				show: false,
				current: "",
				idx: 0,
				result: ""
			},
			symbol: [
				{ zh: "无", en: "none" },
				{ zh: "圆形", en: "circle" },
				{ zh: "方形", en: "rect" },
				{ zh: "圆角方形", en: "roundRect" },
				{ zh: "三角形", en: "triangle" },
				{ zh: "图钉", en: "pin" },
				{ zh: "箭头", en: "arrow" },
				{ zh: "钻石", en: "diamond" }
			],
			originOption: "",
			isParse: false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				} else {
					this.picker.show = false;
				}
			},
			visualMap: {
				deep: true,
				handler() {
					if (this.isShow && !this.isParse) {
						this.createVisualMap();
					}
				}
			}
			// isRange() {
			// 	this.showHideRange();
			// }
		},
		methods: {
			createVisualMap() {
				if (this.isVisualMap) {
					if (this.visualMap.type == "continuous") {
						for (var key in this.continuous) {
							this.visualMap[key] = this.continuous[key];
						}
					} else {
						for (var key in this.piecewise) {
							this.visualMap[key] = this.piecewise[key];
						}
					}

					this.$emit("visual-map-result", JSON.parse(JSON.stringify([this.visualMap])));
				} else {
					this.$emit("visual-map-result", null);
				}
			},
			// showHideRange() {
			// 	if (!this.isRange) {
			// 		delete this.visualMap.inRange;
			// 		delete this.visualMap.outOfRange;
			// 		delete this.visualMap.controller;
			// 	} else {
			// 		this.visualMap.inRange = {color: ["#f6efa6", "#d88273", "#bf444c"]};
			// 		this.visualMap.outOfRange = {color: ["#f6efa6", "#d88273", "#bf444c"]};
			// 		this.visualMap.target={
			// 			inRange:{color: ["#f6efa6", "#d88273", "#bf444c"]},
			// 			outOfRange:{color: ["#f6efa6", "#d88273", "#bf444c"]}
			// 		};
			// 		this.visualMap.controller = {
			// 			inRange: {color: ["#f6efa6", "#d88273", "#bf444c"]},
			// 			outOfRange: {color: ["#f6efa6", "#d88273", "#bf444c"]}
			// 		};
			// 	}
			// },
			addColorPicker() {
				this.visualMap.color.push("#FFFFFF");
			},
			delColorPicker(idx) {
				this.visualMap.color.splice(idx, 1);
			},
			showVisualMapColor(item, idx) {
				if (this.picker.idx != idx || !this.picker.show) {
					this.picker.current = "color";
					this.picker.result = item;
					this.picker.idx = idx;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onVisualMapColor(op) {
				this.visualMap.color[this.picker.idx] = op.rgba;
			},
			onColorPicker(op) {
				if (this.picker.current) this.visualMap[this.picker.current] = op.rgba;
			},
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.createVisualMap();
				}
			},
			parseObj() {
				if (this.option instanceof Array && this.option.length == 1) {
					this.isParse = true;
					var option = this.option[0];
					if (option) {
						this.isVisualMap = true;

						// if ("inRange" in option) {
						// 	this.isRange = true;
						// } else {
						// 	this.isRange = false;
						// }

						for (var key in option) {
							this.visualMap[key] = option[key];
						}
						if (
							this.visualMap.color &&
							!(this.visualMap.color instanceof Array)
						) {
							console.log(1);
							this.visualMap.color = ["#f6efa6", "#d88273", "#bf444c"];
						}
						this.originOption = JSON.stringify(this.visualMap);
					} else {
						this.visualMap = false;
					}
					var that = this;
					setTimeout(() => {
						that.isParse = false;
					}, 100);
				}
			},
			colseOption() {
				this.isShow = false;
				if (this.originOption != JSON.stringify(this.visualMap)) {
					var that = this;
					setTimeout(function() {
						if (that.isVisualMap) {
							that.$emit("visual-map-result", JSON.parse(JSON.stringify([that.visualMap])));
						} else {
							that.$emit("visual-map-result", null);
						}
					}, 50);
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
